<template>
  <div class="home">
    <!-- <div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
        :show-overflow-tooltip = "true"
          prop="address"
          label="地址"
          width="180">
        </el-table-column>
      </el-table>
    </div> -->
    <HelloWorld @sonData="pare" msg="Welcome to Your Vue.js App" />
    {{ parmsg }}
    <!-- 他的名字叫做: {{ this.$store.state.name }} {{ name }} -->
    <!-- 模块模式 -->
    他的名字叫做: {{ this.$store.state.app.name }} {{ name }}
    <button @click="setName">改名</button>
    <button @click="setNameAsync">异步改名</button>
    {{ formatterName }} <br />
    <button v-copy="copyText">copy</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Home",
  components: {
    HelloWorld
  },
  computed: {
    ...mapState({
      name: state => state.app.name
    }),
    // formatterName() {
    //   return this.$store.getters["app/formatterName"]
    // }
    ...mapGetters("app", ["formatterName"])
    // count() {
    //   return this.$store.state.name;
    // }
  },
  data() {
    return {
      parmsg: "",
      copyText: "这是要复制的内容",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  mounted() {
    this.setReduce();
    // console.log(this.$store);
  },
  // beforeRouteLeave(to, from, next) {
  //   const answer = window.confirm(
  //     "Do you really want to leave? you have unsaved changes!"
  //   );
  //   if (answer) {
  //     next();
  //   } else {
  //     next(false);
  //   }
  // },
  methods: {
    ...mapMutations("app", ["changewithName"]),
    ...mapActions({ changewithNameAsync: "app/changewithNameAsync" }),
    setName() {
      // console.log(this.$store);
      // this.$store.commit({
      //   type: "changewithName",
      //   name: "小旺"
      // });
      this.changewithName({ name: "小旺" });
    },
    setNameAsync() {
      // this.$store.dispatch({
      //   type: "changewithNameAsync",
      //   name: "小一"
      // });
      this.changewithNameAsync({ name: "小一" });
    },
    pare(params) {
      this.parmsg = params;
    },
    setReduce() {
      // 计算数组中每个元素出现的次数
      let names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"];
      let nameNum = names.reduce((pre, cur) => {
        // console.log(pre,cur);
        // console.log(pre[cur] = 1);
        if (cur in pre) {
          pre[cur]++;
        } else {
          pre[cur] = 1;
        }
        return pre;
      }, {});
      console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
      //数组去重
      let arr = [1, 2, 3, 4, 4, 1];
      let newArr = arr.reduce((pre, cur) => {
        if (!pre.includes(cur)) {
          return pre.concat(cur);
        } else {
          return pre;
        }
      }, []);
      console.log(newArr); // [1, 2, 3, 4]
      //将二维数组转为一维数组
      let arr2 = [
        [0, 1],
        [2, 3],
        [4, 5]
      ];
      let newArr1 = arr2.reduce((pre, cur) => {
        return pre.concat(cur);
      }, []);
      console.log(newArr1); // [0, 1, 2, 3, 4, 5]
      // 将多维转为一维
      let arr3 = [
        [0, 1],
        [2, 3],
        [4, [5, 6, 7]]
      ];
      const newArr2 = function(arr3) {
        return arr3.reduce(
          (pre, cur) => pre.concat(Array.isArray(cur) ? newArr2(cur) : cur),
          []
        );
      };
      console.log(newArr2(arr3)); //[0, 1, 2, 3, 4, 5, 6, 7]
      //对象里属性求和
      var result = [
        {
          subject: "math",
          score: 10
        },
        {
          subject: "chinese",
          score: 20
        },
        {
          subject: "english",
          score: 30
        }
      ];

      var sum1 = result.reduce(function(prev, cur) {
        return cur.score + prev;
      }, 0);
      console.log(sum1); //60
      //求和或者求积
      var arr1 = [1, 2, 3, 4];
      var sum = arr1.reduce((x, y) => x + y);
      var mul = arr1.reduce((x, y) => x * y);
      console.log(sum); //求和，10
      console.log(mul); //求乘积，24
    }
  }
};
</script>
